<template>
    <div >
         <div class="inp">
             学员状态：
            <el-select v-model="selectValue" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            学员名称:<el-input style="width:200px" v-model="studentName" placeholder="请输入学员名称" ></el-input>
            手机号：<el-input style="width:200px" v-model="studentmobile" placeholder="请输入学员电话"></el-input>
            <el-button @click="search">搜索</el-button>
            <el-button @click="Reset">重置</el-button>
         </div>
         <table border="1" style="width:1000px">
             <tr>
                 <td>学生名称</td>
                 <td>手机号</td>
                 <td>状态</td>
                 <td>创建时间</td>
                 <td>操作</td>
             </tr>
              <tr v-for="(item,index) in currentPageDate" :key="index">
                 <td>{{item.nickname}}</td>
                 <td>{{item.mobile}}</td>
                 <td>{{(item.status==1)? '禁用' :'启用'}}</td>
                 <td>{{new Date(Number(item.created_at)).toLocaleString()}}</td>
                 <td>
                    <a href="javascript:;">详情</a>-
                    <a href="javascript:;">编辑</a>-
                    <a href="javascript:;">启用</a>-
                    <a href="javascript:;">删除</a>-
                    <a href="javascript:;">重置密码</a>
                 </td>
             </tr>
         </table>
         <div class="page">
          <ul>
            <li v-for="(item,index) in total" :key="index" @click="Pagechange(item)">{{item}}</li>
          </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list:this.$store.state.Alist,
                options: [{
                    value: '1',
                    label: '禁用'
                }, {
                    value: '0',
                    label: '启用'
                }],
                selectValue:'',
                studentName:'',
                studentmobile:'',

                 //总页数
                total:1,
                //当前页数
                currentpage:1,
                //每页显示条数
                pageSize:6,
                //当前页显示的内容
                currentPageDate:[]

            }
        },
        mounted() {
            this.total=Math.ceil(this.list.length/this.pageSize);
            
            console.log(this.total);
            this.total=this.total==0 ? 1 :this.total
            this.setCurrentpageData()
        },
        methods: {
            Reset(){
                 this.selectValue="",
                this.studentName="",
                this.studentmobile="",
                this.setCurrentpageData()
            },
            //分页
            setCurrentpageData(){
                let begin = (this.currentpage-1) * this.pageSize;
                let end =this.currentpage * this.pageSize;
                this.currentPageDate=this.list.slice(begin,end)
               
            },
            //点击每页进行换页
            Pagechange(item){
            console.log(item);
            this.currentpage=item
            this.setCurrentpageData()
            },
            search(){
                if(this.selectValue==='' && this.studentName==='' && this.studentmobile===''){
                    return alert('请输入搜索条件')
                }
                this.currentPageDate=this.list.filter(value=>{
                    return value.status.includes(this.selectValue) && value.nickname.includes(this.studentName) && value.mobile.includes(this.studentmobile) 
                })
                console.log(this.selectValue);
            }
        },
        filters:{
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, 'yyyy年MM月dd日 hh:mm:ss');

            }
        }
    }
</script>

<style lang="scss" scoped>
.inp{
    margin-bottom: 20px;
}
table{
    border-spacing: 0;
    border-collapse: 0;
    tr{
        text-align: center;
    }
}
.page{
    width: 100%;
    height: 50px;
   
    overflow: hidden;
    ul{
      list-style: none;
     margin-top: 15px;
      li{
        float: left;
        display: inline-block;
        width: 30px;
        background: skyblue;
        margin-left: 20px;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
</style>